<style>
  .swipeout-actions-right a.into-cart {
    font-size: .75rem;
    background:#f60;
    padding: 0 .8rem;
  }
  .swipeout-actions-right a.count {
    flex-direction: column;
    padding: 0;
    width: 3rem;
    justify-content: space-between;
    background: #e7e7e7;
  }
  .swipeout-actions-right a.count i,.swipeout-actions-right a.count input {
    float: left;
    width: 100%;
    text-align: center;
  }
  .swipeout-actions-right a.count input {
    background: #fff;
  }
</style>
<div class="page">
<header class="bar bar-nav">
  <a class="icon icon-menu pull-left open-panel"></a>
  <h1 class="title">商品列表</h1>
</header>
<div class="content infinite-scroll infinite-scroll-bottom" data-distance="50">

  <div class="list-container list-block" style="margin: .75rem 0;">
    <ul style="border: none;" class="product-list-container">
      <li class="swipeout" style="border-bottom: none;">
        <!-- Usual list element wrapped with "swipeout-content" -->
        <div class="swipeout-content">
          <!-- Your list element here -->
          <div class="card product" style="margin: 0;">
            <div class="card-content">
              <div class="list-block media-list">

                <div class="item-content">
                  <div class="item-media">
                    <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44">
                  </div>
                  <div class="item-inner elip" style="border: none;">
                    <div class="item-title-row">
                      <div class="item-title elip">A2 Platinum Infant Formula Stage 1</div>
                    </div>
                    <div class="item-subtitle elip">白金系列1段婴儿配方奶粉</div>
                  </div>
                </div>

              </div>
            </div>
            <div class="card-footer" style="border-top: none;border-radius:0;padding-top: 0;min-height: 1rem;">
              <span>900G</span>
              <span style="color:#CC3300;">￥666</span>
            </div>
          </div>
        </div>
        <!-- Swipeout actions right -->
        <div class="swipeout-actions-right">
          <!-- Swipeout actions links/buttons -->
          <a href="#" style="background: #f60;">加入购物车</a>
          <!--<a class="swipeout-close" href="#">Action 2</a>-->
        </div>
      </li>
    </ul>
  </div>
</div>

</div>
<!-- 侧栏-->
<div class="panel panel-left panel-reveal theme-dark">
  <div class="content-block">
    <div class="list-block">
      <ul id="cat-list">
        <li class="item-content active" data-id="all">
          <div class="item-inner">全部商品</div>
        </li>
        <% if (categories) {
          for(i=0; i<categories.length; i++) {%>
              <li class="item-content" data-id="<%= i+1 %>">
                <div class="item-inner"><%= categories[i].name%></div>
              </li>
          <%}}%>
      </ul>
    </div>
    <!-- Click on link with "close-panel" class will close panel -->
    <!--<p><a href="#" class="close-panel">关闭</a></p>-->
  </div>
</div>
<!--侧栏end-->


<script>
  $(function(){
    function listProduct(id){
      $.get('/list/'+id,function(res){
        var html='';
        console.log(res);
        for (var i in res){
          html += '<li class="swipeout" style="border-bottom: 1px solid #e7e7e7;"><div class="swipeout-content">' +
            '<div class="card product" style="margin: 0;"><div class="card-content"><div class="list-block media-list">' +
            '<div class="item-content"><div class="item-media">' +
            '<img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44">' +
            '</div><div class="item-inner elip" style="border: none;"><div class="item-title-row">' +
            '<div class="item-title elip">A2 Platinum Infant Formula Stage 1</div></div>' +
            '<div class="item-subtitle elip">' + res[i].name + '</div></div></div></div></div>' +
            '<div class="card-footer" style="border-top: none;border-radius:0;padding-top: 0;min-height: 1rem;">' +
            '<span>' + res[i].model + '</span><span style="color:#CC3300;">￥666</span></div></div></div>' +
            '<div class="swipeout-actions-right">' +
            '<a class="count"><i class="plus">+</i><input type="number" value="1" lang="en" /><i class="minus">-</i></a>' +
            '<a data-pid="' + res[i].id + '" class="into-cart">加入购物车</a>' +
            '</div></li>';
        }
        $('.product-list-container').html(html);
        $('.product-list-container .swipeout:eq(0)').css('border-top','1px solid #e7e7e7');

      });
    }
    listProduct("all");
//        侧栏

    $('.panel-left .item-content').click(function(){
      var id = $(this).data('id');
      console.log(id);
      $(this).addClass('active').siblings('.item-content').removeClass('active');
      listProduct(id);
    });

    //点击
    $(document).on('click','.product',function(){
      window.location.href = 'detail';
    });
//    加入购物车
    $(document).on('click','.into-cart',function(){
      var $thisVal = $(this).siblings('.count').find('input');
      var amount = Number($thisVal.val());
//      alert(amount);
      var pid = $(this).data('pid');
      console.log(pid);

      if(Number.isInteger(amount) && amount >= 1){
        $.post('/user/addToCart',{productId: pid, amount: amount},function(res, status){
          console.log(status);
          console.log(res);
          if (res.status == 'success'){
              $.toast("加入购物车成功");
          }
        });
      }else{
        $.toast("商品数量错误");
        $thisVal.val("1");
      }
    });
//    加减数字
    function count($this,isPlus){
      var $thisVal = $this.siblings('input');
      var amount = Number($thisVal.val());
      if(!isPlus && amount == 1) return;
      if(Number.isInteger(amount) && amount >= 1){
        $thisVal.val(function(){
            return isPlus ? Number($thisVal.val()) + 1 : Number($thisVal.val()) - 1;
        });
      }else{
        $.toast("商品数量错误");
        $thisVal.val("1");
      }
    }
    $(document).on('click','.plus',function(){
      count($(this),true);
    });
    $(document).on('click','.minus',function(){
      count($(this));
    });


  });
</script>


